<template>
  <vxe-button
    @click="choiceImg"
    icon="fa fa-upload"
    v-auth="routeName + ':upload'"
    status="primary"
    class="upBtn"
  >
    上传文件
  </vxe-button>
  <input
    :headers="myHeaders"
    ref="filElem"
    type="file"
    accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel "
    class="upload-file"
    @change="handChange($event)"
  />
</template>
<script lang="ts">
import { getToken } from "/@/utils/auth";
import { http } from "/@/utils/http";
import { errorMessage, successMessage } from "/@/utils/message";
import { useRoute } from "vue-router";
export default {
  name: "uploadExcel",
  props: {
    downLoadUrl: {
      type: String,
      default: ""
    }
  },
  data() {
    const route = useRoute();
    return {
      token: "",
      myHeaders: {
        Authorization: ""
      },
      routeName: route.name
    };
  },
  mounted() {
    const getTo = getToken();
    this.token = JSON.parse(getTo).accessToken;
    this.myHeaders = {
      Authorization: this.token
    };
  },
  methods: {
    // 文件上传
    addFile(file) {
      return http.request("post", this.downLoadUrl, {
        data: file
      });
    },
    choiceImg() {
      this.$refs.filElem.dispatchEvent(new MouseEvent("click"));
    },
    handChange(event) {
      let files = event.target.files;
      let formData = new FormData();

      // 导入数据
      if (files.length > 0) {
        formData.append("file", files[0]); // 'file'可变相当于input表单的name属性
      } else {
        return false;
      }
      this.addFile(formData)
        .then((res: any) => {
          if (res.code == 0) {
            successMessage("导入成功");
            this.$emit("uploadExcelClose", false);
          } else {
            errorMessage(res.message);
          }
          this.dodFalse();
        })
        .catch(() => {
          errorMessage("操作失败");
        });
    },
    // 上传取消
    dodFalse() {
      this.$nextTick(() => {
        this.$refs.filElem.value = "";
      });
    }
  }

  // setup(props, ctx) {
  //   const filElem = ref<HTMLElement | null>(null);
  //   const getTo = getToken();
  //   const token = JSON.parse(getTo).accessToken as string;
  //   // 上传文件时的token
  //   const myHeaders = reactive({
  //     Authorization: token
  //   });

  //   // 文件上传
  //   const addFile = (file: object) => {
  //     return http.request("post", props.downLoadUrl, {
  //       data: file
  //     });
  //   };

  //   const choiceImg = () => {
  //     filElem.value.dispatchEvent(new MouseEvent("click"));
  //   };
  //   const handChange = event => {
  //     let files = event.target.files;
  //     let formData = new FormData();

  //     // 导入数据
  //     if (files.length > 0) {
  //       formData.append("file", files[0]); // 'file'可变相当于input表单的name属性
  //     } else {
  //       return false;
  //     }
  //     addFile(formData)
  //       .then((res: any) => {
  //         if (res.type == "application/json") {
  //           successMessage("导入成功");
  //           ctx.emit("uploadExcelClose", false);
  //         } else {
  //           errorMessage(res.message);
  //         }
  //       })
  //       .catch(() => {
  //         errorMessage("操作失败");
  //       });
  //   };
  //   // 上传取消
  //   const dodFalse = () => {
  //     nextTick(() => {
  //       files = null;
  //       console.log(files);
  //       // filElem.value = null;
  //       // filElem.value.files = "";
  //          filElem.value.clearFiles();
  //     });
  //   };

  //   return {
  //     filElem,
  //     myHeaders,
  //     choiceImg,
  //     handChange,
  //     dodFalse
  //   };
  // }
};
</script>
<style lang="scss" scoped>
:deep(.el-upload-list--picture-card .el-upload-list__item),
:deep(.el-upload--picture-card) {
  width: 100px;
  height: 100px;
}
:deep(.el-upload--picture-card i) {
  margin-top: 36px;
}
</style>
